<template>
  <el-dialog
    top="5vh"
    width="550px"
    :title="`${editUserId ? '编辑' : '新增'}供应商`"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
    class="user_message_max"
  >
    <el-form :model="addFormData.userInfo" ref="dialogDom" :rules="userRules" label-width="120px">
      <el-form-item label="供应商名称" prop="name">
        <el-input v-model.trim="addFormData.userInfo.name" placeholder="供应商名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商图片">
        <UploadCom v-model.trim="addFormData.userInfo.icon" @change="changeHandler"> </UploadCom>
      </el-form-item>
      <el-form-item label="类型值">
        <el-select filterable v-model="addFormData.userInfo.businessType" placeholder="请选择平台类型">
          <el-option
            v-for="(item, index) in businessTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="供应商类型">
        <el-select filterable v-model="addFormData.userInfo.sysType" placeholder="请选择平台类型">
          <el-option
            v-for="(item, index) in organizationTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="平台类型">
        <el-select filterable v-model="addFormData.userInfo.sysType" placeholder="请选择平台类型">
          <el-option
            v-for="(item, index) in organizationTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商类型">
        <el-select filterable v-model="addFormData.userInfo.type" placeholder="请选择供应商类型">
          <el-option
            v-for="(item, index) in organizeTreeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model.trim="addFormData.userInfo.comments" autocomplete="off" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <div class="submitbtn">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="formDataSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { userRules } from '@/utils/tools/RegExpression.js'
import UploadCom from '@/components/custom/UploadImage.vue'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import Dialog from './Dialog.js'

export default {
  components: {
    UploadCom
  },
  name: 'editUsreDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userRules,

      addFormData: {
        // 新建供应商表单
        userInfo: {}
        // // 公司信息
        // type: ''
      },
      // 类型0超管 1管理员 2招标代理机构 3供应商
      organizeTreeList: [
        {
          name: '1类型',
          id: 0
        },
        {
          name: '2类型',
          id: 1
        }
      ],
      organizationTypeList: [
        {
          name: '招标',
          id: 0
        },
        {
          name: '平台',
          id: 1
        }
      ],
      businessTypeList: [
        {
          name: '工程类',
          id: '工程类'
        },
        {
          name: '材料类',
          id: '材料类'
        }
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(v) {
        this.$emit('update:show', v)
      }
    }
  },
  watch: {
    show(v) {
      this.openDialog(v)
    }
  },
  created() {
    this.dialog = new Dialog(this, {
      //新建供应商表单
      userInfo: {
        sysType: null,
        name: '', //供应商名
        type: '', //
        icon: '',
        imageUrl: '', //
        comments: '' //
      }
      // 公司信息
      // type: ''
    })
    // 机构树
  },
  methods: {
    changeHandler(data) {
      this.addFormData.userInfo.imageUrl = data.filePath
    },
    getList() {
      this.$emit('getList')
    },
    openDialog(v) {
      if (!v) return
      if (!this.editUserId) {
        this.dialog.addOpenDialog()
      } else {
        this.dialog.editOpenDialog(this.editUserId)
      }
    },
    formDataSubmit() {
      this.dialog.formDataSubmit()
    }
  }
}
</script>

<style lang="less" scoped>
.submitbtn {
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  text-align: center;
}
</style>

<style lang="less" scoped>
.user_message_max {
  .el-select {
    margin-left: 0 !important;
  }
}
/deep/.el-select {
  width: 100%;
}
</style>
